<template>
        <div class="student-manage">
                <el-card>
                        学员管理
                </el-card>
                <el-card class="table">
                        <div class="filter-section">
                                <el-select v-model="queryParams.kindName" class="filter" placeholder="请选择项目"
                                        size="large" clearable filterable @change="kindNameChanged">
                                        <el-option v-for="item in coureseObj.kindName" :value="item.value"
                                                :key="item" />
                                </el-select>
                                <el-select v-model="queryParams.couresName" class="filter" placeholder="请选择课程名称"
                                        size="large" clearable filterable>
                                        <el-option v-for="item in coureseNames" :value="item.value" :key="item" />
                                </el-select>
                                <el-input v-model="queryParams.className" class="filter classInput" clearable
                                        placeholder="请输入班期名称" size="large" input-style="height: 200px;"></el-input>
                                <el-button type="primary" @click="openInsert">新增学员</el-button>
                        </div>
                        <el-table :data="studentList" style="width: 100%" v-loading="loading">
                                <el-table-column fixed prop="phoneNumber" label="手机号" width="200" />
                                <el-table-column prop="kindName" label="项目" width="200" />
                                <el-table-column prop="couresName" label="课程名称" width="200" />
                                <el-table-column prop="className" label="班期名称" width="200" />
                                <el-table-column label="是否启用" width="200">
                                        <template #default="{ row }">
                                                <el-switch v-model="row.isEnable" active-color="#13ce66"
                                                        active-text="启用" :before-change="isEnableChanged(row)" />
                                        </template>
                                </el-table-column>
                                <el-table-column label="更新时间" width="200">
                                        <template #default="{ row }">
                                                {{ formatTime(row.updateTime) }}
                                        </template>
                                </el-table-column>
                                <el-table-column prop="updatePeople" label="更新人" width="200" />
                                <el-table-column fixed="right" label="操作" width="300" align="center">
                                        <template #default="{ row }">
                                                <el-button size="small" @click="openStudentDetail(row)">学员详情</el-button>
                                                <el-button size="small" @click="openStudentClass(row)">选择班期</el-button>
                                        </template>
                                </el-table-column>
                        </el-table>

                        <el-pagination v-model:current-page="queryParams.currentPage"
                                v-model:page-size="queryParams.pageSize" :page-sizes="[5, 10, 50]"
                                layout="sizes, prev, pager, next,total,jumper" prev-text="上一页" next-text="下一页"
                                :total="total" class="pagination" />
                </el-card>
        </div>
        <StudentDetail ref="studentDetailRef" :studentObj="studentObj" @change="getstudentData"></StudentDetail>
        <StudentClass ref="studentClassRef" :studentObj="studentObj" @change="getstudentData"></StudentClass>
        <StudentInsert ref="StudentInsertRef" @change="getstudentData"></StudentInsert>

</template>

<script setup>
import { getStudentList, getCourseObj, reviseIsEnable } from '@/apis/student' // 关于学生数据的api
import { ElMessage, ElButton } from 'element-plus';
import { formatTime } from '@/utils/formmatTime'
import { ref, computed, watch } from 'vue'
import StudentDetail from './components/StudentDetai.vue'
import StudentClass from './components/StudentClass.vue';
import StudentInsert from './components/StudentInsert.vue';

import { decryptAES } from '@/utils/jiemi'  // 解密方法



const queryParams = ref({
        kindName: '', // 分类
        couresName: '', // 课程名称
        className: '', // 班期名称
        currentPage: 1, // 返回第几页的数据,默认第一页
        pageSize: 10 // 每次返回多少条,默认每次返回10条
})
const studentList = ref([]) // 请求来的数据
const total = ref(0) // 总条数
const coureseObj = ref({}) // 课程分类对象
const loading = ref(true) // 加载的遮罩层
const studentDetailRef = ref(null)  // 子组件
const studentClassRef = ref({})// 子组件
const StudentInsertRef = ref({}) // 子组件
const studentObj = ref({})





// 获取学生数据
const getstudentData = async () => {
        // 加载的遮罩层
        loading.value = true
        let { data } = await getStudentList(queryParams.value)
        data = JSON.parse(decryptAES(data, '123456')) // 对后端回传的数据进行解密并序列化
        studentList.value = data.data
        total.value = data.total
        setTimeout(() => {
                loading.value = false
        }, 500)
}



// 获取课程分类数据
const getCourse = async () => {
        const { data } = await getCourseObj()
        coureseObj.value = data
}

// 课程分类的展示
const coureseNames = computed(() => {
        const kindName = queryParams.value.kindName
        const courseObjValue = coureseObj.value
        if (!kindName) {
                if (courseObjValue.kindName) {
                        const allData = []
                        courseObjValue.kindName.forEach(element => {
                                allData.push(...element.courseName);
                        });
                        return allData
                } else {
                        return []
                }
        } else {
                const obj = courseObjValue.kindName.find((item => item.value === kindName))
                return obj.courseName
        }

})

// 当选框发生变化时，执行的方法，向后端发送请求
const kindNameChanged = (val) => {
        // val 是select框修改后的值
        if (val) {
                // 判断第二个筛选框中的课程是否属于第一个筛选框选中的项目类别
                coureseObj.value.kindName.forEach((item) => {
                        if (item.value == val) {
                                if (!item.courseName.some(item => item.value == queryParams.value.couresName)) {
                                        queryParams.value.couresName = ''
                                }
                        }
                })
        }

}

// 当请求参数发生变化时请求
watch(queryParams.value, () => {
        getstudentData();
})


// 是否启用选框的检测
const isEnableChanged = (row) => {
        return async () => {
                const { data } = await reviseIsEnable(row)
                if (!data.code) {
                        ElMessage.success(data.txt)
                        // 是否允许切换
                        return true
                } else {
                        ElMessage.error(data.txt)
                        return false
                }

        }
}

// 打开学员详情
const openStudentDetail = ({ info }) => {
        studentObj.value = info  // 将学生信息重新覆盖，并传给子组件
        studentDetailRef.value.open()
}


// 打开班期
const openStudentClass = (data) => {
        studentClassRef.value.open(data, coureseObj.value)
}

// 打开新增学员
const openInsert = () => {
        StudentInsertRef.value.open()
}

getstudentData(queryParams)
getCourse()


</script>


<style lang="scss" scoped>
html::-webkit-scrollbar {
        width: 0;
}

.classInput {
        margin-top: 10px;
}

.pagination {
        float: right;
        margin-top: 10px;
}

.el-drawer {
        width: 43% !important;
}
</style>